<%= javascript_include_tag "ct_phong" %>
<style>
    button.g-button {width: 90}
</style>
<div id="porlet_1"></div>
<div id="porlet_2">
  <div class="porlet_2"><b><a href="#">
    <!-- NAME -->
    THÔNG TIN PHÒNG
    <!-- END - NAME-->
  </a></b>
  </div>
</div>
<div id="porlet_3"></div>
<div id="porlet_4">
  <div class="porlet_4">&nbsp;</div>
</div>
<div id="porlet_5"></div>
<div style="clear:left"></div>
<div class="main_porlet">
  <!-- CONTENT -->
  <div class="form_item">
    <table>
      <tr>
        <td class="field" style="width: 175px;"><b>Mã phòng:</b></td>
        <td><%= @phong.MaPhong %></td>
        <td id = "phongid"><%= @phong.id%></td>
      </tr>
      <tr>
        <td class="field"><b>Tên phòng:</b></td>
        <td><%= @phong.TenPhongg %></td>
      </tr>
      <tr>
        <td class="field"><b>Loại phòng:</b></td>
        <td><%= @phong.loai_phong.TenLoai %></td>
      </tr>
    </table>
  </br>
    <h1>Danh sách chi tiết trong phòng máy</h1>

    <div style="float: right; width: 15%">
      <button id="ThemTS" class="g-button g-button-submit" data-bind="click: ShowSLTS">Thêm mới</button>
      <button id="SuaTS" class="g-button g-button-submit" style="margin: 10 0 10 0" data-bind="click: ShowSLTS">Sửa</button>
      <button id="ChuyenTS" class="g-button g-button-submit" data-bind="click: ShowSLTS">Chuyển</button>
    </div>
      <table class="roomdetails">
          <thead>
            <td>Tên tài sản</td>
            <td>Tình trạng</td>
            <td>Số lượng</td>
          </thead>
          <tbody data-bind="foreach: CtPhongs">
            <tr>
              <td data-bind="text: TenTS"></td>
              <td data-bind="text: TinhTrang"></td>
              <td data-bind="text: SoLuong"></td>
            </tr>
          </tbody>
        </table>
    <div class="button-right" >
      <a href="<%= edit_phong_path(@phong) %>">
        <input type="button" value="Sửa thông tin" class="g-button" style="padding:0 20px; height: 29px; line-height: 29px;">
      </a>
      <a href="<%= phongs_path %>">
        <input type="button" value="Trở lại" class="g-button" style="padding: 0 20px; height: 29px; line-height: 29px;">
      </a>
    </div>
  </div>
  <!-- Dialog -->
  <!-- Dialog-ThemTS -->
  <div id="dialog-ThemTS" style="display: none;" title="Thêm tài sản">
      <label>Tới: </label><%= @phong.TenPhongg %>
      </br>
    <div style="margin: 10 0 10 0">
      <p style="float: left; width: 25%">Chọn tài sản</p>
      <select data-bind="options: TaiSans, optionsText: 'TenTS', value: TSThem, click: ChonThem" style="width: 75%"></select>
    </div>
    <div style="margin: 20 0 10 0; width: 100% ">
      <div style="float: left; width: 50%" >
        <p style="float: left; padding-right: 20" >Số lượng đã có</p>
        <span data-bind="text: SLSD"></span>
      </div>
      <div style="float: left; width: 50%" >
        <p style="float: left; padding-right: 20">Số lượng còn lại</p>
        <span data-bind="text: SLCL"></span>
      </div>
    </div>
    <div style="margin: 10 0 10 0">
      <p style="float: left; width: 25%">Số lượng thêm</p>
      <textarea id="SLThem" data-bind="value: SLThem" style="width: 20%; height: 20px"></textarea>
    </div>

    <span class="rooms-error" data-bind="text: Thongbao,visible: CoTB() == 1"></span>

  </div>
  <!-- End Dialog-ThemTS -->
  <!-- Dialog-SuaTS -->
  <div id="dialog-SuaTS" style="display: none;" title="Thay đổi tình trạng sản phẩm">
    <b><%= @phong.TenPhongg %></b>
    <div style="margin: 10 0 10 0">
      <p style="float: left; width: 25%">Chọn tài sản</p>
      <select data-bind="options: CtPhongs, optionsText: 'TenTS', value: TSSua, click: ChonSua" style="width: 75%"></select>
    </div>
    <div style="margin: 10 0 10 0">
      <p style="float: left; width: 30%">Số lượng sử dụng</p>
      <span data-bind="text: SLSD"></span>
    </div>
    <div style="margin: 20 0 10 0; width: 100% ">
         <div style="float: left; width: 50%" >
          <p style="float: left; padding-right: 20" >Số lượng còn tốt</p>
          <span data-bind="text: Tots"></span>
        </div>
        <div style="float: left; width: 50%" >
          <p style="float: left; padding-right: 20">Số lượng đang sửa</p>
          <span data-bind="text: Suas"></span>
        </div>
    </div>
    </br>
    <div style="margin: 20 0 10 0; width: 100% ">
      <div style="width: 30%; float: left">Lựa chọn <select data-bind="options: TinhTrangs, value: TTChon"></select></div>
      <div style="width: 70%">số lượng <input data-bind="value: SLThayDoi" style="width: 35px"/> cái</div>
    </div>

    <span class="rooms-error" data-bind="text: Thongbao,visible: CoTB() == 1"></span>
  </div>
  <!-- End Dialog-SuaTS -->
  <!-- Dialog-ChuyenTS -->
  <div id="dialog-ChuyenTS" style="display: none;" title="Thay đổi tình trạng sản phẩm">
    <b><%= @phong.TenPhongg %></b>
    <div style="margin: 10 0 10 0">
      <p style="float: left; width: 25%">Chọn tài sản</p>
      <select data-bind="options: CtPhongs, optionsText: 'TenTS', value: TSChuyen, click: ChonChuyen" style="width: 75%"></select>
    </div>
    <div style="margin: 10 0 10 0">
      <p style="float: left; width: 35%">Số lượng có thể chuyển</p>
      <span data-bind="text: Tots"></span>
    </div>
    <div style="margin: 20 0 10 0; width: 100% ">
      <div style="width: 45%; float: left">Chọn phòng <select data-bind="options: Phongs, optionsText: 'Ten', value: PhongChon" style="width: 150px"></select></div>
      <div style="width: 70%">số lượng <input data-bind="value: SLChuyen" style="width: 35px"/> cái</div>
    </div>

    <span class="rooms-error" data-bind="text: Thongbao,visible: CoTB() == 1"></span>
  </div>
  <!-- End Dialog-ChuyenTS -->
  <!-- End Dialog -->
  <!-- END - CONTENT -->
</div>
